<template>
  <header style="height: 3%; display: flex; margin-bottom: -10px">
    <h1>电路总览</h1>
    <div
      style="width: 90%; height: 100%; display: flex; justify-content: start"
    >
    </div>
  </header>
  <div class="home-page">
    <!-- 弹窗 -->
    <el-dialog
      title="新增电路名"
      v-model="dialogVisible"
      style="
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px;
        width: 30%;
        margin-top: 15%;
      "
    >
      <el-form :model="form">
        <!-- 在这里添加你的表单字段 -->
        <el-form-item label="电路名称:">
          <el-input v-model="form.circuit_diagram_name"></el-input>
        </el-form-item>
        <el-form-item label="创建用户:">
          <el-input v-model="form.auth" disabled></el-input>
        </el-form-item>
        <el-form-item label="电路描述:">
          <el-input v-model="form.desc"></el-input>
        </el-form-item>
        <!-- 其他表单字段 -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 选项卡 -->

    <!-- 搜索内容展示区域 -->
    <div class="search-resultss">
      <el-card
        v-for="(item, index) in results.name"
        :key="item.id"
        class="cards"
      >
        <div
          style="
            display: flex;
            flex-direction: row;
            width: 95%;
            margin-left: 2.5%;
            margin-bottom: -2%;
          "
        >
          <div style="display: flex; flex-direction: column; width: 90%">
            <h2 class="card-title">电路名：{{ item }}</h2>
            <p class="card-info">创建者: {{ results.auth[index] }}</p>
            <p class="card-info">创建日期: {{ results.datetime[index] }}</p>
            <p class="card-description">描述: {{ results.desc[index] }}</p>
            .
          </div>
         <el-card style="width: 8.5%; margin-left: 50px; margin-top: -18px">
            <div
              style="
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
              "
            >
              <button class="card-button" @click="settingCircuit(item)">
                编辑
              </button>
              <button
                class="card-button"
                style="
                  margin-top: 20px;
                  margin-bottom: -10px;
                  background-color: #595959;
                "
                @click="checkCreatorAndDelete(results.auth[index])"
              >
                删除
              </button>
            </div>
          </el-card>
        </div>
      </el-card>
    </div>
    <div style="width: 90%">
      <div class="demo-pagination-block">
        <el-pagination
          class="custom-pagination"
          v-model:current-page="_skip"
          v-model:page-size="_limit"
          :page-sizes="[4]"
          :size="size"
          :background="true"
          layout=" total, prev, pager, next"
          :total="total"
          @size-change="onPageSize"
          @current-change="onPageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import {
  addCircuit,
  deleteCircuit,
  pageCircuitServer,
} from "@/server/iIndex";
import useUserInfoStore from "/src/stores/userInfo.js";
import router from "@/router/index.js";
const userInfo = useUserInfoStore();
import { ElMessage } from "element-plus";
const results = ref([]);
const _skip = ref(1);
const total = ref(0);
const _limit = ref(4);
const size = ref("default");
const searchData = ref({
  _skip: _skip.value,
  _limit: _limit.value,
});
const onPageChange = (num) => {
  _skip.value = num;
  searchData.value._skip = num;
  getPageCircuit();
};

const onPageSize = (num) => {
  _limit.value = num;
  searchData.value._limit = num;
  getPageCircuit();
};

const getPageCircuit = async () => {
  try {
    const response = await pageCircuitServer(searchData.value);
    results.value = response;
    total.value = parseInt(results.value.total_num, 10);
  } catch (error) {
    console.error("出错了:", error);
  }
};
const settingCircuit = (circuitName) => {
  router.push({
    name: "电路配置",
    params: {
      circuitName: circuitName,
    },
  });
};

function checkCreatorAndDelete(creator) {
  const currentUser = userInfo.info;
  if (creator !== currentUser) {
    alert("您非创建者，不可删除该条记录");
  } else {
    const isConfirmed = confirm("是否确认删除该条记录？");
    if (isConfirmed) {
      deleteCircuit(creator);
      ElMessage.alert("删除成功");
    }
  }
}
// 选择选项卡
const dialogVisible = ref(false); // 控制弹窗的显示与隐藏
const form = ref({
  circuit_diagram_name: "",
  auth: userInfo.info,
  desc: "",
}); // 表单数据


// 提交表单
const submitForm = async () => {
  try {
    await addCircuit(form.value);
    dialogVisible.value = false; // 关闭弹窗
    ElMessage({
      type: "success",
      message: "提交成功",
    });
  } catch {
    dialogVisible.value = false;
    ElMessage.error("电路名重复！");
  }
};

function adjustViewportScale() {
  const screenWidth = window.innerWidth;
  const scale = screenWidth / 1440; // 假设设计稿宽度为1440px
  const viewportMeta = document.querySelector("meta[name='viewport']");
  if (viewportMeta) {
    viewportMeta.setAttribute(
      "content",
      `width=1440, initial-scale=${scale}, maximum-scale=${scale}, user-scalable=no`
    );
  }
}

// 在setup函数中使用生命周期钩子
onMounted(async () => {
  adjustViewportScale(); // 初始调用以设置正确的缩放比例
  window.addEventListener("resize", adjustViewportScale); // 监听窗口大小变化
  await getPageCircuit();
});

onUnmounted(() => {
  window.removeEventListener("resize", adjustViewportScale); // 移除事件监听器
});
</script>

<style lang="scss" >
.tab-button {
  margin-top: -40px;
  margin-bottom: -30px;
}

.home-page {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: Arial, sans-serif;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  /* background-color: #f8f9fa; */
}

.search-container {
  width: 100%;
  /* display: flex; */
  justify-content: center;
  margin-bottom: 20px;
  margin-left: 0px;
  margin-top: 10px;
}

.tabss {
  margin-top: 5px;
  margin-left: 20px;
  width: 200px;
  height: 40px;
}

.search-input {
  width: 100%;
  max-width: 500px;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  /* margin-left: 50px; */
}

.search-resultss {
  margin-top: 10px;
  width: 90%;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  margin-left: -40px;
  border-radius: 1px;
  gap: 10px;
}

.cards {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-left: 10px;
  margin-bottom: -10px;
  margin-top: 5px;
}

.card-button {
  background-color: #003f82;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  height: 50px;
  margin-top: -10px;
  transition: background-color 0.3s;
}

.card-title {
  margin-top: -5px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.card-info {
  margin: 5px 0;
  padding: 0 10px;
}

.card-description {
  margin: 5px 0;
  padding: 0 10px;
  color: #6c757d;
}

.tabs {
  /* display: flex; */
  justify-content: center;
  margin-bottom: 20px;
  margin-top: 10px;
  margin-left: -20px;
  width: 200px;
  height: 40px;
}

.tab-button {
  background-color: #003f82;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.tab-button:hover {
  background-color: #0056b3;
}

.tab-content {
  margin-top: 20px;
  padding: 20px;
  border: 1px dashed #ccc;
  border-radius: 4px;
}

.demo-pagination-block {
  margin-top: 20px;
  text-align: left;
  display: block;
}

/* prev, pager, next */
.custom-pagination .el-pagination__total {
  color: #000000;
}
</style>
